<html xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"  
      xmlns:c="http://java.sun.com/jsp/jstl/core">  

    <ui:composition template="layout.xhtml">
        <ui:define name="corpo">
            <h:form>
                <div id="breadcrumb">
                    <p:commandLink  actionListener="#{managerIndex.redirect('index.xhtml')}" value="Inicio" update="@form" immediate="true"/> >
                    <p:commandLink  actionListener="#{managerIndex.redirect('indexProtocolo.xhtml')}" value="Protocolo" update="@form" immediate="true"/> > 
                    <p:commandLink  value="Selar Protocolo" update="@form" immediate="true"/>
                </div>
            </h:form>
            <p:tabView dynamic="true"  binding="#{managerProtocoloSelo.tabView}" id="tabView">  

                <p:tab id="tab1" title="Buscar Protocolos">   
                    <ui:include src="buscaProtocoloSelo.xhtml"/>
                </p:tab>
                <p:tab id="tab2" closable="true" binding="#{managerProtocoloSelo.tab}" title="Selar Protocolo">   
                    <h:form id="form">
                        <p:messages id="msg"/>

                        <p:panel rendered="#{managerProtocoloSelo.selar}" header="Protocolo Selo" id="seloProtocolo">
                            <fieldset class="ui-fieldset">
                                <legend><h:outputLabel value="Protocolo"/></legend>
                                <h:panelGrid columns="4" styleClass="textAlignRight" 
                                             columnClasses="textAlignRight">
                                    <h:outputLabel value="Protocolo: "/>
                                    <h:outputText value="#{managerProtocoloSelo.protocolo.id}" />
                                    <h:outputLabel value="Data: "/>
                                    <h:outputText value="#{managerProtocoloSelo.protocolo.dataCad}" >
                                        <f:convertDateTime pattern="dd/MM/yyyy"/>
                                    </h:outputText>
                                    <h:outputLabel value="Interessado:"/>
                                    <h:outputText value="#{managerProtocoloSelo.protocolo.cliente.nome}" />
                                </h:panelGrid>
                            </fieldset>
                            <h:panelGrid columns="2" style="width: 100%;" columnClasses="topAlignLeft, topAlignRight" >
                                <p:row>
                                    <fieldset class="ui-fieldset">
                                        <legend><h:outputLabel value="Serviços Protocolo"/></legend>

                                        <p:dataTable var="serv" 
                                                     value="#{managerProtocoloSelo.servicoProtocoloModel}" 
                                                     paginator="true" rows="9"  
                                                     rowKey="#{serv.id}" paginatorPosition="bottom"
                                                     selection="#{managerProtocoloSelo.servProtocolo}"
                                                     style="width:100%; " emptyMessage=" Nenhum Protocolo Pendente">  

                                            <p:ajax event="rowSelect" listener="#{managerProtocoloSelo.ver()}" 
                                                    update="@form, :tabView:form:msg" />

                                            <p:column selectionMode="single"  disabledSelection="#{!empty serv.selos}" style="width:18px" />  

                                            <p:column >  
                                                #{serv.atoItem.descricao}  
                                            </p:column>  

                                        </p:dataTable>  

                                    </fieldset>
                                    <fieldset class="ui-fieldset">
                                        <legend><h:outputLabel value="Cartório"/></legend>

                                        <h:outputLabel value="Livro: " />
                                        <p:autoComplete id="livro" value="#{managerProtocoloSelo.servProtocolo.livro}" 
                                                        completeMethod="#{managerLivro.completeLivro}"   
                                                        var="li" itemLabel="#{li.titulo}" itemValue="#{li}" 
                                                        converter="livroConverter" forceSelection="true" 
                                                        minQueryLength="3" label="Livro"
                                                        dropdown="true" required="true" size="16" > 

                                        </p:autoComplete>

                                        <h:outputLabel value="Folhas: " />
                                        <p:inputText id="pag" required="true" label="Folhas" value="#{managerProtocoloSelo.folhas}"/>
                                        <p:tooltip for="pag" value="Separe as páginas por - (Traço)" 
                                                   showEvent="focus" hideEvent="blur" /> 


                                    </fieldset>

                                </p:row>
                                <p:row >
                                    <fieldset class="ui-fieldset">
                                        <legend><h:outputLabel value="Cartório"/></legend>
                                        <p:panel  style="float:right; border-width: 0px;" styleClass="selosPanel">
                                            <p:dataTable var="selo" 
                                                         value="#{managerProtocoloSelo.seloModel}" 
                                                         rowKey="#{selo.id}"
                                                         selection="#{managerProtocoloSelo.selos}"
                                                         style="width:249px; display: inline-block;" 
                                                         styleClass="check" paginator="true" rows="3"
                                                         paginatorPosition="bottom" 
                                                         paginatorTemplate="{PageLinks}" emptyMessage="Nenhum Selo encontrado"
                                                         > 

                                                <p:column selectionMode="multiple" />  

                                                <p:column >

                                                    <table class="seloTable">
                                                        <tr>
                                                            <td colspan="3" style="text-align:center">#{selo.tipoSelo.nome}</td>
                                                        </tr>
                                                        <tr>
                                                            <td  rowspan="3" style="width: 17%; background-color: \##{selo.tipoSelo.corSelo.cor};">

                                                            </td>
                                                            <tr >
                                                                <td style="border-width:0px; text-align:right; width: 25%">Série:</td>
                                                                <td style="text-align:left; padding: 2px; margin: 0px">#{selo.serie}</td>
                                                            </tr>
                                                            <tr>
                                                                <td style="text-align:right;">Nº: </td>
                                                                <td style="text-align:left; padding: 2px; margin:0px;">#{selo.numero}</td>
                                                            </tr>
                                                        </tr>
                                                    </table>
                                                </p:column>  

                                            </p:dataTable>
                                             <fieldset class="ui-fieldset">
                                                <legend><h:outputLabel value="+ Selos"/></legend>
                                                <h:panelGrid columns="2" styleClass="textAlignRight"  >
                                                    <h:outputLabel value="Serie : "  style="width: 70px;"/>
                                                    <p:inputText  value="#{managerProtocoloSelo.selo.serie}" size="13" />
                                                    <h:outputLabel value="Nº : " />
                                                    <p:inputText  value="#{managerProtocoloSelo.selo.numero}" size="13"/>
                                                    <h:outputLabel value="Tipo Selo :"/>
                                                    <p:autoComplete value="#{managerProtocoloSelo.selo.tipoSelo}" 
                                                                    completeMethod="#{managerTipoSelo.completeTipoSelo}"  
                                                                    var="p" itemLabel="#{p.nome}" size="9" itemValue="#{p}"
                                                                    converter="tipoSeloConverter" forceSelection="true" 
                                                                    converterMessage="Erro, verifique o Tipo Selo"
                                                                    minQueryLength="3" dropdown="true" panelStyle="width:200px;"> 
                                                        <p:ajax event="itemSelect" 
                                                                listener="#{managerConsultarProtocoloSelo.handleSelectTipoSelo}"/>
                                                        <p:column> 
                                                            <table >
                                                                <tr style="height:20px; background-color: \##{p.corSelo.cor};">
                                                                    <td style="width: 20px;"></td>
                                                                </tr>
                                                            </table>
                                                        </p:column>
                                                        <p:column>  
                                                            #{p.nome}
                                                        </p:column>  
                                                    </p:autoComplete>
                                                </h:panelGrid>
                                                
                                                <!--                                    <div style="text-align: center; margin-top: 10px;">
                                                                                        <p:commandButton value="Adicionar Selo"/>
                                                                                    </div>-->
                                             </fieldset>

                                        </p:panel>
                                    </fieldset>
                                </p:row>
                            </h:panelGrid>
                            <div class="buttonAction">
                                <br/>
                                <p:commandButton icon="ui-icon-plusthick" value="Adicionar" 
                                                 actionListener="#{managerProtocoloSelo.atribuirSelo()}" 
                                                 update="@form" process="@form"/>


                                <br/>
                                <center>
                                    <p:ajaxStatus style="width:16px;height:16px;" >  
                                        <f:facet name="start">  
                                            <h:graphicImage value="/media/img/loading.gif" />  
                                        </f:facet>  
                                        <f:facet name="complete">  
                                            <h:outputText value="" />  
                                        </f:facet>  
                                    </p:ajaxStatus>
                                </center>
                            </div>

                            <p:dataTable var="serv" 
                                         value="#{managerProtocoloSelo.lstServProtocolo}" 
                                         paginator="true" rows="10"  
                                         rowKey="#{serv.id}" paginatorPosition="bottom"
                                         style="width:100%;">  

                                <f:facet name="header">  
                                    Resultados  
                                </f:facet>  


                                <p:column headerText="Serviços">  
                                    #{serv.atoItem.descricao}  
                                </p:column>  
                                <p:column headerText="Livro" style="width: 60px;">  
                                    #{serv.livro.descricao}  
                                </p:column>  
                                <p:column headerText="Folha" style="width: 40px;">  
                                    <ui:repeat value="#{serv.folhas}"   var="fl">
                                        <h:outputLabel value="#{fl.numero}"/>
                                        <h:outputLabel value=", " rendered="#{serv.folhas.size() > 1 ? true : false}"/>
                                    </ui:repeat>
                                </p:column>  
                                <p:column headerText="selos" >

                                    <ui:repeat value="#{serv.selos}" var="selX">
                                        <p:commandLink  id="selos#{selX.id}" title="Número: #{selX.numero} - Serie: #{selX.serie}" 
                                                        >
                                            <div style="width: 30px; height:30px; float:left; margin-left: 2px;
                                                 background-color: \##{selX.tipoSelo.corSelo.cor};">
                                            </div>
                                        </p:commandLink>
                                    </ui:repeat>


                                </p:column>      
                            </p:dataTable>



                            <div class="buttonAction">
                                <p:commandButton icon="ui-icon-disk" value="Selar" 
                                                 actionListener="#{managerProtocoloSelo.selarProtocolo()}"
                                                 update="@form" process="@this"/>
                                <p:commandButton icon="ui-icon-closethick" value="Cancelar" 
                                                 actionListener="#{managerProtocoloSelo.cancelToSelo()}" 
                                                 update=":tabView, @form"/>


                                <br/>
                                <center>
                                    <p:ajaxStatus style="width:16px;height:16px;" >  
                                        <f:facet name="start">  
                                            <h:graphicImage value="/media/img/loading.gif" />  
                                        </f:facet>  
                                        <f:facet name="complete">  
                                            <h:outputText value="" />  
                                        </f:facet>  
                                    </p:ajaxStatus>
                                </center>
                            </div>
                        </p:panel>

                        <p:dialog  header="Informações do Selo" widgetVar="protSeloDlg" modal="true">  
                            <h:panelGrid columns="2" id="verSeloProtocoloDlg" styleClass="textAlignRight"
                                         columnClasses="textAlignRight"> 
                                <h:outputLabel value="Número: " style="font-weight: bold;"/>

                                <p:row>
                                    <h:outputText value="#{managerProtocoloSelo.seloVer.numero}"/>
                                    <h:outputLabel value="Série: " style="font-weight: bold; float: none;"/>
                                    <h:outputText value="#{managerProtocoloSelo.seloVer.serie}"/>
                                </p:row>
                                <h:outputLabel value="Tipo de Selo " style="font-weight: bold;"/>
                                <h:outputText value="#{managerProtocoloSelo.seloVer.tipoSelo.nome}"/>
                                <h:outputLabel value="Data Entrada: " style="font-weight: bold;"/>
                                <h:outputText value="#{managerProtocoloSelo.seloVer.detalheEntradaSelo.entradaSelo.dataEntrada}">
                                    <f:convertDateTime pattern="dd/MM/yyyy"/>
                                </h:outputText>
                                <h:outputLabel value="Fornecedor: " style="font-weight: bold;"/>
                                <h:outputText value="#{managerProtocoloSelo.seloVer.detalheEntradaSelo.entradaSelo.fornecedor.nome}"/>
                                <h:outputLabel value="Comentário: " style="font-weight: bold;"/>
                                <h:outputText value="#{managerProtocoloSelo.seloVer.detalheEntradaSelo.entradaSelo.comentario}"/>
                            </h:panelGrid>
                            <f:facet name="footer">
                                <center>
                                    <p:commandButton value="Fechar" icon="ui-icon-close"
                                                     onclick="protSeloDlg.hide()"/>
                                </center>
                            </f:facet>
                        </p:dialog>
                    </h:form>
                </p:tab>

            </p:tabView>
        </ui:define>
    </ui:composition>

</html>